<template>
	<div>
		<jk-dialog
			v-model="showDialog"
			title="样纱配置"
			width="600px"
			:show-content-loading="showLoading"
			:confirm-btn-loading="confirmBtnLoading"
			@on-visible-change="onVisibleChange"
			@on-cancel="onVisibleChange"
			@on-confirm="onConfirmBtn"
		>
			<div class="margin-bottom-4 flex-between-center" style="align-items: flex-end;">
				<jk-button class="" size="mini" type="primary" icon="el-icon-plus" @click="onAddBtn(null)">添加配置</jk-button>
				<span style="font-size: 12px;">注：请遵循从小到大的规则配置!</span>
			</div>
			<jk-table ref="jkTable" :data="tableData" :height="dialogTableHeight - 80">
				<vxe-column title="序号" align="center" type="seq" :width="70"></vxe-column>
				<vxe-column title="最小数量(kg)" align="right" field="minValue" :min-width="100">
					<template slot-scope="scope">
						<jk-number-input v-model="scope.row.minValue" :disabled="scope.row.auditState >= 3" size="mini" placeholder=""></jk-number-input>
					</template>
				</vxe-column>
				<vxe-column title="最大数量(kg)" align="right" field="maxValue" :min-width="100">
					<template slot-scope="scope">
						<jk-number-input v-model="scope.row.maxValue" :disabled="scope.row.auditState >= 3" size="mini" placeholder=""></jk-number-input>
					</template>
				</vxe-column>
				<vxe-column title="批号" field="code" align="left" :min-width="150">
					<template slot-scope="scope">
						<jk-input v-model="scope.row.batchCode" placeholder="批号" :clearable="false" size="mini" class="width-100-percent"></jk-input>
					</template>
				</vxe-column>
				<vxe-column title="操作" align="center" field="operation" :width="120">
					<template slot-scope="scope">
						<div class="flex-center">
							<jk-button icon="el-icon-plus" style="margin-right: 3px" type="default" size="mini" @click="onAddBtn(scope.rowIndex)"></jk-button>
							<jk-button icon="el-icon-minus" type="default" size="mini" @click="tableData.splice(scope.rowIndex, 1)"></jk-button>
						</div>
					</template>
				</vxe-column>
			</jk-table>
		</jk-dialog>
	</div>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import {
        productionTestProductConfigPage,
        productionTestProductConfigSaveOrUpdateBatch
    } from '../../../../api/production/order';
    import { tipsBar } from '../../../../utils/jk/jk-tool';
    export default {
        components: {
        },
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            dataId: {
                type: [Number, String],
                default: null
            }
        },
        mixins: [calHeight],
        data() {
            return {
                showDialog: false,
                showLoading: true,
                confirmBtnLoading: false,
                tableData: [],
                defaultRowItem: {
                    minValue: null,
                    maxValue: null,
                    batchCode: '',
                    sortNum: null
                }
            };
        },
        methods: {
            onAddBtn(index) {
                if (index || index === 0) {
                    this.tableData.splice(index + 1, 0, JSON.parse(JSON.stringify(this.defaultRowItem)));
                } else {
                    this.tableData.push(JSON.parse(JSON.stringify(this.defaultRowItem)));
                }
            },
            onConfirmBtn() {
                let hasNull = false;
                hasNull = this.tableData.every(x => x.minValue && x.maxValue && x.batchCode);
                if (hasNull) {
                    let isSort = true;
                    this.tableData.forEach((item, index) => {
                        item.sortNum = index + 1;
                        if (index) {
                            if (this.tableData[index].minValue > this.tableData[index - 1].maxValue) {
                            } else {
                                isSort = false;
                            }
                        }
                    });
                    if (isSort) {
                        this.saveRequest();
                    } else {
                        this.$tipsBar(this, 'custom', 'warning', '请遵循从小到大的规则配置!');
                    }
                } else {
                    this.$tipsBar(this, 'validator');
                }
            },
            saveRequest() {
                this.confirmBtnLoading = true;
                productionTestProductConfigSaveOrUpdateBatch({
                    list: this.tableData
                }).then(res => {
                    this.confirmBtnLoading = false;
                    if (res.data.status === 200) {
                        tipsBar(this, 'save');
                        this.$emit('on-finish');
                    }
                });
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                }
            },
            getDetailRequest() {
                return productionTestProductConfigPage().then(res => {
                    if (res.data.status === 200) {
                        this.tableData = res.data.res || [];
                    }
                });
            },
            async getDependentData() {
                this.showLoading = true;
                await this.getDetailRequest();
                this.showLoading = false;
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.getDependentData();
                }
            }
        }
    };
</script>
